<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header clearfix">
        <a href="#" class="position"></a>
        <a href="#" class="weixin"></a>
        <div class="search">
            <input type="text" placeholder="小芒果">
            <span class="icon-search"></span>
        </div>
    </div>
    <!-- 导航 -->
    <div class="menu">
        <ul class="clearfix">
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu1.png);background-size: cover;"></div>
                <div class="menu-item-title">水果蔬菜</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu2.png);background-size: cover;"></div>
                <div class="menu-item-title">肉禽蛋品</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu3.png);background-size: cover;"></div>
                <div class="menu-item-title">海鲜水产</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu4.png);background-size: cover;"></div>
                <div class="menu-item-title">速食冷冻</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu5.png);background-size: cover;"></div>
                <div class="menu-item-title">粮油食品</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu6.png);background-size: cover;"></div>
                <div class="menu-item-title">夏日特惠</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu7.png);background-size: cover;"></div>
                <div class="menu-item-title">雪糕冰棍</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu8.png);background-size: cover;"></div>
                <div class="menu-item-title">休闲零食</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu9.png);background-size: cover;"></div>
                <div class="menu-item-title">酒水饮品</div>
            </a></li>
            <li><a href="#">
                <div class="menu-item-icon" style="background-image: url(./images/menu10.png);background-size: cover;"></div>
                <div class="menu-item-title">日用百货</div>
            </a></li>
        </ul>
    </div>
    <!-- 主题内容 -->
    <div class="main">
        <!-- 超划算 -->
        <div class="cheap">
            <div class="cheap-title clearfix">
                <span>超划算</span>
                <a href="#">更多</a>
            </div>
            <div class="cheap-content">
                <ul class="clearfix">
                    <li>
                        <a href="#" class="img">
                            <img src="./images/product1.png" alt="">
                        </a>
                        <div class="title">富士小苹果 1.5富士小苹果 1.5… </div>
                        <div class="price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="add"></a></div>
                    </li>
                    <li>
                        <a href="#" class="img">
                            <img src="./images/product2.png" alt="">
                        </a>
                        <div class="title">麻辣小龙虾 1.5麻辣小龙虾 1.5… </div>
                        <div class="price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="add"></a></div>
                    </li>
                    <li>
                        <a href="#" class="img">
                            <img src="./images/product3.png" alt="">
                        </a>
                        <div class="title">香甜美人蕉 1.5香甜美人蕉 1.5… </div>
                        <div class="price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="add"></a></div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 产品推荐 -->
        <div class="recommend clearfix">
            <div class="recommend-left">
                <div class="recommend-content">
                    <div class="recommend-title">吃好点</div>
                    <div class="recommend-desc">新鲜大樱桃尝鲜</div>
                    <ul class="clearfix">
                        <li>
                            <a href="#"><img src="./images/pic1.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/pic2.png" alt=""></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="recommend-right">
                <div class="recommend-content">
                    <div class="recommend-title">产地量贩</div>
                    <div class="recommend-desc">产地直发保质保鲜</div>
                    <ul class="clearfix">
                        <li>
                            <a href="#"><img src="./images/pic3.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/pic4.png" alt=""></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 产品分类 -->
        <div class="product-category">
            <ul class="tab">
                <li class="active">
                    <span>全部</span>
                    <i>猜你喜欢</i>
                </li>
                <li>
                    <span>时令</span>
                    <i>当季优选</i>
                </li>
                <li>
                    <span>进口</span>
                    <i>国际直采</i>
                </li>
                <li>
                    <span>人气</span>
                    <i>大家在买</i>
                </li>
            </ul>
            <div class="tab-content">
                <ul>
                    <li class="clearfix">
                        <div class="img">
                            <a href="#"><img src="./images/tab1.png" alt=""></a>
                        </div>
                        <div class="info">
                            <div class="info-title">红颜草莓 1.5kg</div>
                            <div class="info-label"><span>特价</span><i>24H发货</i></div>
                            <div class="info-price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="addd"></a></div>
                            <div class="info-number">888 人已买过</div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="img">
                            <a href="#"><img src="./images/tab2.png" alt=""></a>
                        </div>
                        <div class="info">
                            <div class="info-title">沙漠西瓜 1.5kg</div>
                            <div class="info-label"><span>特价</span><i>24H发货</i></div>
                            <div class="info-price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="addd"></a></div>
                            <a href="#"></a>
                            <div class="info-number">888 人已买过</div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="img">
                            <a href="#"><img src="./images/tab1.png" alt=""></a>
                        </div>
                        <div class="info">
                            <div class="info-title">红颜草莓 1.5kg</div>
                            <div class="info-label"><span>特价</span><i>24H发货</i></div>
                            <div class="info-price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="addd"></a></div>
                            <a href="#"></a>
                            <div class="info-number">888 人已买过</div>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="img">
                            <a href="#"><img src="./images/tab2.png" alt=""></a>
                        </div>
                        <div class="info">
                            <div class="info-title">沙漠西瓜 1.5kg</div>
                            <div class="info-label"><span>特价</span><i>24H发货</i></div>
                            <div class="info-price"><span>¥ 20.9</span><i>/箱</i><a href="#" class="addd"></a></div>
                            <a href="#"></a>
                            <div class="info-number">888 人已买过</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部导航 -->
    <div class="tabbar">
        <ul>
            <li><a href="#">
                <span><img src="./images/zhuye.png" alt="" width="22" height="21"></span>
                <i style="color: #0EB6FF;">主页</i>
            </a></li>
            <li><a href="#">
                <span><img src="./images/fenlei.png" alt="" width="21" height="17"></span>
                <i>分类</i>
            </a></li>
            <li><a href="#">
                <span><img src="./images/gouwuche.png" alt="" width="20" height="20"></span>
                <i>购物车</i>
            </a></li>
            <li><a href="#">
                <span><img src="./images/wode.png" alt="" width="18" height="21"></span>
                <i>我的</i>
            </a></li>
        </ul>
    </div>
</body>
</html>